<template>
    <div class="box">
        <header>
            <div class="header-box">
                <div class="xiaoyu">
                </div>
                <div class="input">
                    <div class="fdj">
                        <input type="text" value="dell台式机">     
                    </div>
                </div>
            </div>
        </header>
        <main>
            <div class="data_list">
                <ul class="box">
                    <div v-for="(item) in list" :key="item.id">
                        <img :src="item.img" alt="">
                        <span :text="item.text">{{item.text}}</span>
                        <p :price="item.price">{{item.price}}</p>
                    </div>
                </ul>
            </div>
        </main>
        <footer>
            <ul>
                <li>
                    <router-link to="/shouye"><span> <img src="https://gw.alicdn.com/mt/TB1Zaa.DND1gK0jSZFKXXcJrVXa-2845-2845.png_200x200q90" alt=""></span></router-link>
                </li>
                <li>
                    <router-link to="/fenlei"><span> <img src="https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/56507/6/12787/3168/5d9c4b12Ef363dd8d/4af32f42575509d8.png" alt=""></span></router-link>                          
                </li>
                <li>
                    <router-link to="/gouwu"><span> <img src="https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/64954/4/12406/3529/5d9c4b12Ee7a82735/f2fe0a88bf344736.png" alt=""></span></router-link>
                </li>
                <li>
                    <router-link to="/denglu"><span><img src="https://img12.360buyimg.com/img/s130x100_jfs/t1/203343/14/10880/3097/61641568E184a8e0b/4522f6ec5bb9b10b.png" alt=""></span></router-link>
                </li>
            </ul>
        </footer>
    </div>
</template>

<script>
    export default {
        data () {  
            return {
                list:[
                    {id:"1",img:"https://img10.360buyimg.com/mobilecms/s360x360_jfs/t1/7101/1/18056/165618/62f5c460E92f532a1/af94ad901110a7bc.jpg!q70.dpg.webp", text:"长虹电饭煲 多功能",price:"￥58.80"},
                    {id:"2",img:"https://img10.360buyimg.com/mobilecms/s360x360_jfs/t1/85580/9/18081/111934/61387cbaE1a01b3b2/5124ced8e1468466.jpg!q70.dpg.webp", text:"乐事 “无限” 薯片 原味", price:"￥17.40"},
                    {id:"3",img:"https://img10.360buyimg.com/mobilecms/s360x360_jfs/t1/156837/25/5911/101042/5fffb7d8E66479a3a/1442bc90153a8399.jpg!q70.dpg.webp", text:"休闲迷你金钱烧烤猪肉 100g", price:"￥49.00"},
                    {id:"4",img:"https://img10.360buyimg.com/mobilecms/s360x360_jfs/t1/149047/6/27581/145765/634f5d4aE5c27d43b/75875707b8bf7dbe.jpg!q70.dpg.webp", text:"小胡鸭 酸辣无骨鸡爪脱骨去骨鸭掌泡椒", price:"￥45.00"},
                    {id:"5",img:"https://img10.360buyimg.com/mobilecms/s360x360_jfs/t1/162425/6/22926/112832/61837274E3e5798c2/bcf27be9f836930b.jpg!q70.dpg.webp", text:"嘉顿 夹心饼干芝士味 早餐休闲零食糕点", price:"￥16.50"},
                    {id:"6",img:"https://img10.360buyimg.com/mobilecms/s360x360_jfs/t1/114932/4/28729/135524/6309bb84Ec1a570df/595f8dcd5222a7e4.jpg!q70.dpg.webp", text:"味滋源乳酸菌小口袋面包300g 网红办公室休闲零食", price:"￥13.90"},
                ],
            }
        },
    }
</script>

<style lang="less" scoped>
.box{
    header{
        .header-box{
            display: flex;
            border-bottom: 0.1px solid;
            padding-bottom: 10px;
            .xiaoyu{
                width: 20px;
                height: 20px;
                display: block;
                background-image: url(https://st.360buyimg.com/so/images/search/jd-sprites.png?__inline=);
                background-position: -21.88px 2.00000000000002px;
                background-size: 200px 200px;
                margin: 10px;
            }
            .input{
                width: 80%;
                height: 30px;
                display: flex;
                font-size: 0px;
                background-color: #F7F7F7;
                //border: 1px solid;
                margin-top: 10px;
                border-radius: 20px;
                .fdj{
                    width: 20px;
                    height: 20px;
                    display: block;
                    background-image: url(https://st.360buyimg.com/so/images/search/jd-sprites.png?__inline=);
                    background-position: 80.12px 1px;
                    background-size: 200px 200px;
                    margin: 10px;
                        input{
                            padding: 0px;
                            margin-top: 0px;
                            padding-bottom: 10px;
                            height: 16px;
                            margin-left: 30px;
                            background-color: #F7F7F7;
                            border: none;
                        }
                }
            }
            
        }
    }
    main{
        .data_list{
            // margin-bottom: 100px;
            .box{
                width: 100%;
                height: 100%;
                display: flex;
                flex-wrap: wrap;
                padding: 0px;
                div{
                    padding-left: 10px;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    img {
                        width: 173px;
                        height: 173px;
                    }
                    span {
                        width: 170px;
                        text-align: center;
                        height: 100%;
                        font-size: 17px;
                    }
                    p{
                        color: red;
                        font-size: 20px;
                        margin-bottom: 15px;
                    }
                }
            }
        }
    }
    footer{
        width: 100%;
        height: 60px;
        background-color: #FFFFFF;
        display: flex;
        position: fixed;
        left: 0;
        bottom: 0;
        box-shadow: 0 0 4px 1px #848689;
        ul {
            width: 100%;
            display: flex;
            li {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                img{
                    width: 80px;
                    height: 60px;
                }
            }
            li:first-child {
                // flex: 1;
                // display: flex;
                // flex-direction: column;
                // justify-content: center;
                // align-items: center;
                img{
                    width: 40px;
                    height: 30px;
                }
            }
        }
    }
}
</style>